<template>
	<view v-if="type == 1" class="">
		<uv-count-down :time="time" format="mm:ss" autoStart millisecond @change="onChange">
			<view class="ss-flex">
			<!-- 	<text class="time__item">{{ timeData.days }}&nbsp;天</text>
				<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text> -->
				<text class="time__item">{{ timeData.minutes }}</text>&nbsp;分&nbsp;
				<text class="time__item">{{ timeData.seconds }}</text>&nbsp;秒
			</view>
		</uv-count-down>
	</view>
	<view v-if="type == 2" class="">
		<uv-count-down :time="time" format="mm:ss" autoStart millisecond @change="onChange">
			<view class="ss-flex">
			<!-- 	<text class="time__item">{{ timeData.days }}&nbsp;天</text>
				<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text> -->
				<text class="time__item1">{{ timeData.minutes }}</text><text style="color: #000;">&nbsp:&nbsp;</text>
				<text class="time__item1">{{ timeData.seconds }}</text>
			</view>
		</uv-count-down>
	</view>
</template>

<script setup>
	const props = defineProps({
		time: {
			type: Number,
			default: 30 * 60 * 60 * 1000
		},
		type: {
			type: Number,
			default: 1
		}
	})
	const timeData  = ref({})
	function onChange(e) {
		timeData.value = e
	}
</script>


<style lang="scss" scoped>
	.time__item {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    width: 55px;
		    height: 30px;
		    background-color: #303030;
		    color: #fff;
		    border-radius: 8px;
		    box-shadow: 0 2px 5px #888;
		    font-weight: 400;
	}
	.time__item1 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 22px;
		height: 22px;
		background-color: #000;
		color: #fff;
		border-radius: 8rpx;
		font-weight: 400;
	}
</style>